import React, { useState, useEffect, useContext } from 'react';
import './style.scss';
import { useNavigate } from "react-router-dom";
import { useStore, useDispatch, useSelector, shallowEqual } from 'react-redux';

export default () => {
    const store = useStore();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    // const testNum = useSelector(state => state.testNum, shallowEqual);
    const [state, setState] = useState(store.getState());

    let toPage = (page) => {
        navigate(page)
    }

    const add = () => {
        // console.log('add')
        state.testNum = state.testNum + 1;
        setState({ ...state });
        dispatch({
            type: "ADD_NUM",
            value: state.testNum,
        })
        // store.dispatch({
        //     type: "ADD_NUM",
        //     value: state.testNum + 1,
        // });
    }


    const reduce = () => {
        state.testNum = state.testNum - 1;
        setState({ ...state });
        dispatch({
            type: "ADD_NUM",
            value: state.testNum,
        })
    }

    return (
        <div className="page-home">
            <h3>page home</h3>

            <div className="box">
                <div className="btn" onClick={() => add()}><span>+</span></div>
                <p>radux val {state.testNum}</p>
                <div className="btn" onClick={() => reduce()}><span>-</span></div>
            </div>
        </div>
    )
}
